<script setup>
import { computed, } from 'vue';

const prop = defineProps(['classInfo','isOp'])
const emit = defineEmits({
edit:null,del:null})

const handleEdit = () => {
  emit('edit',prop.classInfo)
}
const handleDel = () => {
  emit('del',prop.classInfo.id)
}
const teacherList = computed(() => {
    const groupedTeachers = prop.classInfo.trainer.reduce((acc, teacher) => {
    if (!acc[teacher.periodText]) {
      acc[teacher.periodText] = [];
    }
    acc[teacher.periodText].push(teacher.accountName);
    return acc;
  }, {});
  const result = Object.keys(groupedTeachers).map(periodText => {
    const names = groupedTeachers[periodText].join(', ');
    return `${names} --${periodText}`;
  }).join('; ');
    return result
  })
</script>

<template>
  <div class="container">
    <div class="btns" v-if="isOp">
      <div class="remove_btn" @click="handleDel"><el-icon><DeleteFilled /></el-icon></div>
      <div class="edit_btn" @click="handleEdit"><el-icon><EditPen /></el-icon></div>
      <el-checkbox size="large" />
    </div>
    <div class="title">{{ classInfo.systemName }}</div>
    <div class="note">{{ classInfo.teachingContent &&  classInfo.teachingContent.length > 20 ? classInfo.note.teachingContent(0,20) + '...' : classInfo.teachingContent }}</div>
    <el-divider style="margin: 0;"></el-divider>
    <div class="teacher">{{ teacherList }}</div>
  </div>
</template>

<style scoped lang="less">
.container {
  border-radius: 10px;
  border: 1px solid #ebeef5;
  padding: 0 10px;
  margin: 10px;
  .btns {
    display: flex;
    justify-content: right;
    align-content: center;
    .remove_btn ,.edit_btn{
      line-height: 43px;
      font-size: 15px;
      cursor: pointer;
      margin-right: 10px;
    }
  }
}
</style>
